<template>
  <div class="main">
    <h2>请您完善一下所辖区域基础信息</h2>
    <div class="form-container">
      <div class="form-main">
        <div class="name" v-if="fromConfigParam[0].whetherShow">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="name"><span class="required">*</span>责任人姓名</label><br/>
          <input class="form-border" id="name" type="text" name="username" placeholder="姓名" required="required"
                 v-model="nameModel"/> <br/>
        </div>
        <div class="phoneNum" v-if="fromConfigParam[15].whetherShow">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="phone"><span class="required">*</span>联系电话</label><br/>
          <input class="form-border" id="phone" type="text" name="phoneNum" placeholder="请填写联系电话" v-model="phoneModel"/><br/>
        </div>
        <div class="idNumber" v-if="fromConfigParam[1].whetherShow">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="name"><span class="required">*</span>身份证号</label><br/>
          <input class="form-border" id="idNumber" type="text" name="idNumber" placeholder="请填写身份证号"
                 v-model="idNumber"/> <br/>
        </div>
<!--        <div>
          <span class="required">*</span><label>责任区域</label>
        </div>-->
        <div class="currentProvince" v-if="fromConfigParam[8].whetherShow">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="name">省</label><br/>
          <input class="form-border" id="currentProvince" readonly @click="showSelectPopup=true" type="text"
                 name="currentProvince" placeholder="请填所在省" v-model="currentProvince"/> <br/>
        </div>
        <div class="currentCity" v-if="fromConfigParam[9].whetherShow">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="name">市</label><br/>

          <input class="form-border" id="currentCity" readonly @click="showSelectPopup=true" type="text"
                 name="currentCity" placeholder="请填所在市" v-model="currentCity"/> <br/>
        </div>
        <div class="currentCounty" v-if="fromConfigParam[10].whetherShow">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="name">区/县</label><br/>

          <input class="form-border" id="currentCounty" readonly @click="showSelectPopup=true" type="text"
                 name="currentCounty" placeholder="请填写所在区县" v-model="currentCounty"/> <br/>
        </div>
        <div class="currentCountry" v-if="fromConfigParam[11].whetherShow">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="name">街道/乡/镇</label><br/>

          <input class="form-border" id="currentCountry" type="text" name="currentCountry" placeholder="请填所在街道/乡/镇"
                 v-model="currentCountry"/> <br/>
        </div>


        <div class="CommunityBar" v-if="fromConfigParam[14].whetherShow">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="name">社区信息</label><br/>
          <div class="textAreaBox">
            <textarea class="form-border" id="Community" type="text" name="Community" placeholder="社区名称+大概人数"
                      v-model="Community"/>
            <span>{{remnant}}/255</span>
          </div>
        </div>
        <br/>

      </div>
      <button class="form-submit" type="submit" @click="submitClick">提交</button>
    </div>
    <datetime style="display:none;" v-model="queryTime" @on-change="changeTime" :show.sync="timeShow"></datetime>
    <confirm v-model="showconfirm"
             :title="confirmtitle"
             @on-cancel="onCancel"
             @on-confirm="onConfirm"
             @on-show="onShow"
             @on-hide="onHide">
    </confirm>
    <popup v-model="showSelectPopup" @on-hide="popupChange('hide')" @on-show="popupChange('show')" height="50%">
      <menuLinkage :queryObj="casList" @setCityObj="setCityObj" ref="menuLinkage"/>
    </popup>
    <!-- <popup-picker :showCell="false" title="测试" :show.sync="showPopupPicker" :data="casList" :columns="3" v-model="casModel" ></popup-picker> -->
  </div>
</template>
<script>
  import {newquestionnaireData, queryCityData} from '@/assets/js/service'
  import fromConfig from '../../../static/formConfig'
  import {Confirm, Datetime, PopupPicker, Popup} from 'vux'
  import menuLinkage from '../commons/menuLinkage.vue'

  export default {
    components: {
      Confirm,
      Datetime,
      PopupPicker,
      Popup,
      menuLinkage
    },
    data() {
      return {
        casList: [],
        casModel: [],
        openSimple: false,
        levelnum: 0,
        showPopupPicker: true,
        fromConfigParam: fromConfig,
        nameModel: '',//姓名
        genderModel: '0',
        ageModel: '',
        phoneModel: '',//联系电话
        showSelectPopup: false,
        symptoModel: [],
        temperatureModel: '',
        feverModel: '1',
        contactModel: '1',
        showconfirm: false,
        confirmtitle: "是否继续填写",
        // 新增
        queryTime: "开始时间",
        // endTime: '',
        timeShow: false,
        isFlag: true,
        familyMsgModel: '',
        familyModel: '4',
        familyNum: '',
        departmentModel: '',
        addressModel: '',
        newAddressModel: '',
        personModel: '4',
        startDate: '',
        endDate: '',
        value1: '',
        someone: '',
        personMsgModel: '',
        // 新增
        idNumber: '',//身份证
        guardianName: '',//监护人
        guardianIdNumber: '',//监护人ID
        pregnant: '0', //0 否，1 是否为妇女
        residence: '',//常住地
        currentProvince: '',//当前所在省
        currentCity: '',//当前所在市
        currentCounty: '',//当前所在区/县
        currentCountry: '',//街道/乡/镇（当前所在地）
        currentVillage: '',//社区/村（当前所在地）
        currentLocation: '',//当前所在地（详细住址)
        Community: '', //社区信息


      }
    },
    created() {
      this.initcascade();
    },
    mounted: function () {
      let personMsg = localStorage.getItem('responsiblerMsg');
      if (personMsg === null) {
        console.log(personMsg);
      }else{
        //获取本地缓存数据为表单赋值
        var param = {
          "name": this.nameModel,
          "phone": this.phoneModel,
          "idNumber": this.idNumber,//身份证号
          "currentProvince": this.currentProvince,//当前所在省
          "currentCity": this.currentCity,//当前所在市
          "currentCounty": this.currentCounty,//当前所在区/县
          "currentCountry": this.currentCountry,//街道/乡/镇（当前所在地）
          "currentVillage": this.currentVillage,//社区/村（当前所在地）
          "currentLocation": this.currentLocation,//当前所在地（详细住址)
          "Community": this.Community, //社区信息
        };
      }

      this.endTime = this.getCurrentDate();
      //    console.log(this.endTime);
      //    console.log(fromConfig)
    },
    watch: {
      ageModel() {

        let guardian = document.getElementById('guardian');
        console.log(this.ageModel);
        if (this.ageModel < 18) {
          guardian.style.display = 'block';
        } else {
          guardian.style.display = 'none';
        }
      },
      fromConfigParam() {
        // console.log(12);
        // console.log(this.fromConfigParam);
      },
      personModel() {
        console.log(this.personModel);
        let personMsg = document.getElementById('personMsg');
        if (this.personModel != 4) {
          personMsg.style.display = 'block';
        } else {
          personMsg.style.display = 'none';
        }
      },
      familyModel() {
        console.log(this.familyModel);
        let personMsg = document.getElementById('familyMsgs');
        if (this.familyModel != 4) {
          personMsg.style.display = 'block';
        } else {
          personMsg.style.display = 'none';
        }
      }
    },
    computed: {
      remnant() {
        var txtLen = this.Community.length;
        return 255 - txtLen;
      }
    },
    methods: {
      setCityObj(_list) {
        if (typeof(_list[0]) != 'undefined') {
          this.currentProvince = _list[0].name;
        }
        if (typeof(_list[1]) != 'undefined') {
          this.currentCity = _list[1].name;
        }
        if (typeof(_list[2]) != 'undefined') {
          this.currentCounty = _list[2].name;
        }
        if (typeof(_list[3]) != 'undefined') {
          this.currentCountry = _list[3].name;
        } else {
          this.currentCountry = "";
        }
        this.showSelectPopup = false;
      },
      initcascade() {
        let _this = this;
        /*queryCityData({}, function (res) {
          console.log("res==>", res)
          _this.casList = [];
          if (typeof(res.data) != "undefined" && res.data.length > 0) {
            _this.casList = res.data;
            _this.$refs.menuLinkage.initData(_this.casList);

          }
        })*/
        queryCityData({"parentCode":"000000"},function(res){
          console.log("res= queryCityData=>",res)
          _this.casList=[];
          if(typeof(res.data)!="undefined"&&res.data.length>0){
            _this.casList=res.data;
            _this.$refs.menuLinkage.initData(_this.casList,1);
            _this.$refs.menuLinkage.setDefault(['湖北省','武汉市','江夏区'])
          }
        })
      },
      popupChange(_type) {
        console.log("_type==>" + _type);

      },
      showTimePlugin() {
        this.timeShow = true;

      },
      clearTree() {

      },
      changeTime() {
        console.log("change time")
        const cqueryTime = Date.parse(this.queryTime);
        const cendTime = Date.parse(this.endTime);
        // if(cqueryTime > cendTime){
        //     this.queryTime = "开始时间";
        //     window.vm.$vux.toast.text('请重新填写开始时间', 'bottom')
        // }
      },
      getCurrentDate() {
        const timeStr = '-';
        const curDate = new Date();
        const curYear = curDate.getFullYear();  //获取完整的年份(4位,1970-????)
        const curMonth = curDate.getMonth() + 1;  //获取当前月份(0-11,0代表1月)
        const curDay = curDate.getDate();       //获取当前日(1-31)
        const curWeekDay = curDate.getDay();    //获取当前星期X(0-6,0代表星期天)
        const curHour = curDate.getHours();      //获取当前小时数(0-23)
        const curMinute = curDate.getMinutes();   // 获取当前分钟数(0-59)
        const curSec = curDate.getSeconds();      //获取当前秒数(0-59)
        const Current = curYear + timeStr + curMonth + timeStr + curDay;
        return Current;
      },
      getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
          return unescape(r[2]);
        return null;
      },
      onCancel() {
        this.$router.push({path: "/home", query: {}});
      },
      onConfirm() {
        console.log("确认删除")
      },
      onShow() {
        console.log("显示")
      },
      onHide() {
        console.log("隐藏")
      },
      typeTime(val) {
        const d = new Date(val);
        const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate());
        return resDate;
      },
      p(s) {
        return s < 10 ? '0' + s : s
      },
      submitClick() {
        let _this = this;
        // &&_this.$verification(this.ageModel,0,"年龄")&&_this.$verification(this.phoneModel,0,"电话")&&_this.$verification(this.phoneModel,1,"电话")&&_this.$verification(this.temperatureModel,0,"体温")
        // if(_this.$verification(this.nameModel,0,"姓名")){
        var param = {
          "name": this.nameModel,
          // "sex":this.genderModel,
          // "age":this.ageModel,
          "phone": this.phoneModel,
          // "symptom":this.symptoModel.join(','),
          // "temp":this.temperatureModel,
          // "longitude":"35.212234567",
          // "latitude":"160.34234567",
          // "isPatient":this.feverModel,
          // "isContact":this.contactModel,
          // 新增
          // "department": this.departmentModel ,
          // "perAddress": this.addressModel,
          // 新增
          "idNumber": this.idNumber,//身份证号
          // "guardianName": this.guardianName,//监护人
          // "guardianIdNumber": this.guardianIdNumber,//监护人ID
          // "pregnant": this.pregnant, //0 否，1 是否为妇女
          // "residence": this.residence,//常住地
          "currentProvince": this.currentProvince,//当前所在省
          "currentCity": this.currentCity,//当前所在市
          "currentCounty": this.currentCounty,//当前所在区/县
          "currentCountry": this.currentCountry,//街道/乡/镇（当前所在地）
          "currentVillage": this.currentVillage,//社区/村（当前所在地）
          "currentLocation": this.currentLocation,//当前所在地（详细住址)
          "Community": this.Community, //社区信息
          // "curAddress": this.newAddressModel,
          // "isolationTime": this.queryTime ,//居家隔离时间
          // "myCondition": this.personModel ,//本人状况类型
          // "familyStatus": this.familyModel ,
          // "familyNumber": this.familyNum ,
          // "familyStatusDescribe":this.familyMsgModel ,
          // "myConditionDescribe":this.personMsgModel ,
          //
        };
        console.log(param)
        localStorage.setItem('responsiblerMsg', param)
        // return;
        newquestionnaireData(param, function (res) {
          console.log("返回正常questionnaireData", res)
          if (res.success) {
            console.log("ddd" + res)
            _this.$showBottomToast("上报成功")
            //_this.showconfirm=true;
          } else {
            _this.$showBottomToast("请求数据异常！")
          }
        })
        // }

        console.log(this.nameModel + '+' + this.genderModel + '+' + this.ageModel + '+' + this.phoneModel + '+' + this.symptoModel
          + '+' + this.temperatureModel + '+' + this.feverModel + '+' + this.contactModel)
      }
    }
  }
</script>
<style lang="less" scoped>

  .main {
    overflow: hidden;
    padding-right: 8px;
    padding-left: 8px;
    // background: url("../../assets/images/home/bj.png") 0 0;
    background-size: 100% 100%;
    h2 {
      position: relative;
      height: .9rem;
      line-height: .9rem;
      font-size: .26rem;
      font-weight: normal;
      color: #fff;
      text-align: center;
      background-color: rgba(38, 94, 255, .8);
    }
    .form-container {
      background-size: 100% 100%;
      width: 100%;
      margin-bottom: 10px;
      padding-bottom: 25px;
      padding-left: 8px;
      padding-right: 8px;
      .form-main {
        width: 100%;
        padding: 0 15px;
        color: #333;
        border-radius: 8px;
        padding-top: 15px;
        border: 1px solid #e5e5e5;
        background-color: #f5f8fa;
        h4 {
          margin-top: 15px;
        }
        .form-border {
          background-color: rgba(255, 255, 255, 0.9);
          color: #333333;
          padding: 5px;
          margin: 5px 0;
          width: 100%;
          margin-bottom: 20px;
          border-radius: 3px;
        }
        .form-twoBor {
          padding: 5px 0;
          div {
            width: 100%;
            padding: 5px 10px;
            input {
              vertical-align: middle;
              width: 20px;
              height: 20px;
            }
            label {
              font-size: 15px;
            }
          }

        }
        .CommunityBar {
          .textAreaBox {
            height: 8em;
            width: 100%;
            position: relative;
            textarea {
              position: relative;
              padding: 10px;
              width: 100%;
              height: 100%;
              z-index: 2;
            }
            span {
              position: absolute;
              right: 5px;
              bottom: 5px;
              z-index: 3;
              color: #ccc;
            }
          }
        }
        .required {
          color: red;
        }

      }
      .form-submit {
        width: 90%;
        margin-left: 5%;
        height: 50px;
        background: #228ed9;
        border-radius: 8px;
        color: white;
        font-size: 15px;
        border: none;
        outline: none;
      }
    }
    input {
      border: 1px solid #cccccc;
    }
    .yy-input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #ccc;
    }
    textarea {
      border: 1px solid #ccc;
    }

  }
</style>
